<template>
	<view class="game-activity-content" v-if="eventDetail.gameid">
		<!--标题栏-->
		<bar-title bgColor='bg-white'>
			<block slot="content">活动详情</block>
		</bar-title> 
		 
		
		
		<!-- 活动详情 -->
		<view class="activity-top">
			<view class="scen-warp">
				<view class="scenimg">
					<image class="aimg" :src="eventDetail.gameimg" mode="aspectFill"></image>
				</view>
				<view class="sceninfo">
					<view class="top text-bold">
						<view class="margin-right-xs">
							<text class="text-orange">{{eventDetail.addnum}}</text>/{{eventDetail.maxnum}}
						</view>
						<view class="title">{{eventDetail.gamename}}</view>
					</view>
					<view class="price">
						<text class="text-price text-orange">{{eventDetail.gameprice}}</text>/人
					</view>
					<!-- <view v-if="eventDetail.gametype == '80010105'">
						<view class="sub-hd" >
							<view class="date">
								{{gdate.formatTime(eventDetail.startdate)}} {{eventDetail.timequantum}}
							</view>
						</view>
						<view class="tag-group text-cut" v-if="eventDetail.timename">
							<view class='cu-tag line-cyan radius sm'>{{eventDetail.timename}}</view>
						</view>
					</view> -->
					<view>
						<view class="sub-hd">
							<view class="date">
								{{gdate.formatTime(eventDetail.startdate, eventDetail.starttime)}}
							</view>
						</view>
						<view class="tag-group text-cut" v-if="tags.length">
							<block v-for="(tag, index) of tags" :key="index">
								<view class='cu-tag line-gray radius sm'>{{tag}}</view>
							</block>
						</view>
					</view>
					
					
					
					<view class="tag-group text-cut" v-if="tags.length">
						<block v-for="(tag, index) of tags" :key="index">
							<view class='cu-tag line-gray radius sm'>{{tag}}</view>
						</block>
					</view>
					
					<view class="register" v-if="eventDetail.ueselist && eventDetail.ueselist.length">
						<view class="cu-avatar-group">
							<view class="cu-avatar round sm more" ></view>
							<view class="cu-avatar round sm" 
								v-for="(item,index) in avatar" 
								:key="index" 
								:style="[{ backgroundImage:'url(' + item.headurl + ')' }]"
							></view>
						</view>
						<view class="total-group" @click="jumpUserList">
							<text class="text-bold num">{{eventDetail.addnum}}</text>人已报名
							<text class="cuIcon-right"></text>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="eventDetail.activitydescription" 
				class="bg-white padding text-df"
			>
				{{eventDetail.activitydescription}}
			</view>
			
			<view class="shop">
				<view class="shop-title">{{eventDetail.shopnickname}}</view>
				<view class="address-box">
					<view class="icon">
						<image class="location" src="/static/img/icon_dinwei.png" mode="widthFix"></image>
					</view>
					<view class="address">
						{{eventDetail.city}}/{{eventDetail.district}}/{{eventDetail.shopadress}}
						| 
						{{eventDetail.distance}}km
					</view>
					<view class="icon tel-warp"  @tap="calltelephone(eventDetail.shoptelnum)">
						<image class="tel" src="/static/img/icon_phone.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 活动海报 -->
		<view class="activity-img margin-top" v-if="eventDetailImgs.length">
			<block v-for="(dimg, index) of eventDetailImgs" :key="index">
				<view class="img-box" >
					<image class="img" :src="dimg.detailurl" mode="widthFix"></image>
				</view>
			</block>
		</view>
		
		<view class="cu-tabbar-height"></view>
		<!-- footer -->
		<view class="footer">
			<view class="scen-btn flex response ">
				<button class="cu-btn block round"
					:class="!isCollect? 'line-cyan':'bg-cyan'"
					@click="tapCollect"
				>
					<text v-if="!isCollect">收藏</text>	
					<text v-else>已收藏</text>				
				</button>
				<button class="cu-btn block round"
					:class="isSignBtn? 'line-cyan':'bg-cyan'"
					@click="tapSignup"
				>
					<text v-if="isSignBtn">去报名</text>	
					<text v-else>{{noSignText}}</text>				
				</button>
			</view>
		</view>
	</view>
</template>

<script module="gdate" lang="wxs">
	function formatTime (startdate, starttime) {
		var Yy = startdate.substring(0,4) + '年'
		var Mm = startdate.substring(4,6) + '月'
		var Dd = startdate.substring(6,9) + '日'
		if(starttime) {
			var time = starttime.substring(0,2) + ':' + starttime.substring(2)
			return Yy + Mm + Dd+  " " + time
		}
		return Yy + Mm + Dd
	}
    module.exports = {
		formatTime: formatTime
    }
</script>
<script>

import { mapState } from "vuex";
import { Game } from '@/models/game.js';
import { User } from '@/models/user.js';
let user = new User()
export default {

	data() {
		return {
			gameid: 'gmmo1000107420200923155552056',
			gameplanid: 'gpmo1000107420200923155552056',
			gametype: '80010101',
			isCollect: false,
			clickCollect: true,
			eventDetail: {},
			eventDetailImgs: [],
			isSignBtn: false,
			noSignText: '未开放'
		};
	},
	computed:{
		...mapState({
			"hasLogin": state => !!state.token.username
		}),
		tags() {
			let scenstyle = this.eventDetail.scenstyle
			if (!scenstyle) return []
			return scenstyle.split(' ')
		},
		avatar() {
			let ueselist = this.eventDetail.ueselist
			if (!ueselist) return []
			if (ueselist.length > 3) {
				ueselist = ueselist.slice(0, 3)
			} 
			return ueselist
		}
	},
	onLoad(option) {
		if(option && option.gameid) {
			this.gameid = option.gameid
			this.gameplanid = option.gameplanid
			this.gametype = option.gametype
			this.getEventDetails()
			this.getEventDetailImgs()
			this.isCollectGame()
		}
		
	},
	methods: {
		jumpUserList() {
			this.$jumpPages('myfans',{
				gameid: this.gameid
			})
		},
		//拨打电话
		calltelephone(tel) {
			uni.makePhoneCall({
			    phoneNumber: tel //仅为示例
			});
		},
		async getEventDetails() {
			let eventDetail = await Game.getEventDetails({
				gameid: this.gameid,
				gameplanid: this.gameplanid,
				gametype: this.gametype
			})
			this.eventDetail = eventDetail
			this.isSignBtn = false
			if(eventDetail.opensignflag!='1') return
			if(eventDetail.gamestatus=='R') {
				this.noSignText = '已开局'
				return
			}
			if(eventDetail.issignup=='Y') {
				this.noSignText = '已报名'
				return
			}
			if(eventDetail.maxnum-eventDetail.addnum <=0) {
				this.noSignText = '报名已满'
				return
			}
			this.isSignBtn = true
		},
		async getEventDetailImgs() {
			let eventDetailImgs = await Game.getEventDetailImgs(this.gameid)
			console.log(eventDetailImgs);
			this.eventDetailImgs = eventDetailImgs || []
		},
		
		async isCollectGame() {
			if(this.hasLogin){
				let isCollect = await Game.isCollectGame(this.gameid)
				this.isCollect = isCollect.iscollect == 'Y'
			}
		},
		tapCollect(){
			this.clickCollect = false
			let title = this.isCollect?"取消成功":"收藏成功"
			this.handleCollect().then(res => {
				this.isCollect = !this.isCollect
				this.$mTool.showToast({
					title,
					icon: 'none'
				})
				this.clickCollect = true
			}).catch(err => {
				this.clickCollect = true
			})
		},
		
		async handleCollect(){
			if(!this.isCollect) {
				return Game.collectGame(this.gameid)
			}else{
				return Game.cancelColGame(this.gameid)
			}
		},
		
		async tapSignup() {
			if(!this.isSignBtn) {
				this.$mTool.showToast({
					title: this.noSignText,
					icon: 'none'
				})
				return
			}
			if(this.eventDetail.gameprice -0 == 0) {
				Game.userEntryfee({
					gameid: this.eventDetail.gameid,
					hasvocher: 0,
					payway:	'W',
					shopid:	this.eventDetail.shopid
				}).then(res => {
					this.$mTool.showToast({
						title: '报名成功',
						icon: 'none'
					})
					this.getEventDetails()
				})
			} else {
				let loginOpenid =  await user.getTokenFromServer();
				Game.userEntryCreat({
					gameid: this.eventDetail.gameid,
					openid: loginOpenid
				}).then(res => {
					console.log(res);
					const that = this
					uni.requestPayment({
					    provider: 'wxpay',
					    timeStamp: res.timestamp,
					    nonceStr: res.noncestr,
					    package: 'prepay_id=' + res.prepayid,
					    signType: 'MD5',
					    paySign: res.sign,
					    success: function (success) {
					        console.log('success:' + JSON.stringify(success));
							that.$mTool.showToast({
								title: '报名成功',
								icon: 'none'
							})
							that.getEventDetails()
					    },
					    fail: function (err) {
					        console.log('fail:' + JSON.stringify(err));
					    }
					});
				})
				
				
				// this.$mTool.showToast({
				// 	title: '请登录APP支付',
				// 	icon: 'none'
				// })
			}
		}
	},
	onPullDownRefresh() {
		this.getEventDetails()
		this.isCollectGame()
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	onShareAppMessage (options) {
		console.log(options)
		if (options.from === "menu") {
			let gameimg = this.eventDetail.gameimg
			let pathO = `gameid=${this.gameid}&gametype=${this.gametype}&gameplanid=${this.gameplanid}`
			return {
				title: '您的好友邀请您一起参加活动-《'+this.eventDetail.gamename+ '》' ,
				path: '/pages/game/activity?' + pathO,
				imageUrl: gameimg,
			}
		}
	},
}
</script>

<style lang="scss" scoped>
.scen-warp{
	background-color: #FFFFFF;
	padding: 30rpx;
	display: flex;
	.scenimg{
		border-radius: 10rpx;
		overflow: hidden;
		width: 240rpx;
		height: 320rpx;
		margin-right: 16rpx;
		.aimg{
			width: 100%;
			height: 100%;
		}
	}
	.sceninfo{
		min-height: 320rpx;
		position: relative;
		flex: 1;
		.top{
			padding-top: 16rpx;
			color: #333333;
			font-size: 32rpx;
			line-height: 44rpx;
			display: flex;
			margin-bottom: 18rpx;
		}
		.price{
			color: #666666;
			margin-bottom: 18rpx;
			font-size: 20rpx;
		}
		.date{
			color: #333333;
			font-size: 28rpx;
			margin-bottom: 18rpx;
		}
		.text-price{
			font-weight: 700;
			font-size: 32rpx;
		}
	}
	.register{
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		.cu-avatar-group {
		    padding: 0 10rpx 0 12rpx;
		}
		.cu-avatar{
			margin-left: -12rpx;
		}
		.more{
			background-color: #f1f2f3;
			&::after{
				content: '...';
				color: #999999;
				font-size: 40rpx;
				position: absolute;
				left: 2rpx;
				top: -10rpx;
			}
		}
	}
	.tag-group{
		height: 50rpx;
		.cu-tag{
			padding: 0 12rpx;
			height: 40rpx;
		}
	}
}
.shop{
	background-color: #FFFFFF;
	padding: 0 32rpx;
	.shop-title{
		height: 88rpx;
		line-height: 50rpx;
		display: flex;
		align-items: center;
		font-weight: 700;
		font-size: 32rpx;
		border-bottom: 1px solid #E5E5E5;
	}
	.icon{
		display: flex;
		justify-content: flex-end;
		align-items: center;
		flex-shrink: 0;
	}
	.address-box{
		display: flex;
		align-items: center;
		padding: 16rpx 0;
	}
	.address{
		flex: 1;
		color: #666666;
		font-size: 24rpx;
	}
	.tel-warp{
		width: 68rpx;
		height: 64rpx;
		border-color: 1px solid #E5E5E5;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.location{
		width: 24rpx;
		margin-right: 10rpx;
	}
	.tel{
		width: 36rpx;
		margin-left: 5rpx;
	}
}
.footer{
	height: 100rpx;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #FFFFFF;
	display: flex;
	align-items: center;
	
	.scen-btn{
		padding: 15rpx;
		.cu-btn{
			flex: 1;
			margin: 15rpx;
		}
	}
}
.activity-img{
	padding: 30rpx;
	background-color: #FFFFFF;
	.img{
		width: 100%;
		display: block;
	}
}
</style>